import React, { useState } from 'react';
import './index.scss';

const DishPage = () => {
    const [isDrawerOpen, setDrawerOpen] = useState(false);
    const [selectedCategory, setSelectedCategory] = useState(null);

    const categories = ['分类1', '分类2', '分类3', '分类4', '分类5'];
    const vegetables = {
        '分类1': ['蔬菜1', '蔬菜2'],
        '分类2': ['蔬菜3', '蔬菜4'],
    };

    return (
        <view className="dish-page">
            {/* 顶部分类 */}
            <view className="top-categories">
                {categories.slice(0, 1).map(category => (
                    <view key={category} className="category-item">{category}</view>
                ))}
                <button onClick={() => setDrawerOpen(!isDrawerOpen)}>
                    {isDrawerOpen ? '收起' : '展开'}
                </button>
                {isDrawerOpen && (
                    <view className="drawer">
                        {categories.map(category => (
                            <view key={category} className="drawer-item">{category}</view>
                        ))}
                    </view>
                )}
            </view>

            <view className="content">
                {/* 左侧分类 */}
                <view className="left-categories">
                    {categories.map(category => (
                        <view 
                            key={category} 
                            className={`category-item ${selectedCategory === category ? 'selected' : ''}`}
                            onClick={() => setSelectedCategory(category)}
                        >
                            {category}
                        </view>
                    ))}
                </view>

                {/* 右侧蔬菜展示 */}
                <view className="right-vegetables">
                    {selectedCategory && vegetables[selectedCategory].map(vegetable => (
                        <view key={vegetable} className="vegetable-item">{vegetable}</view>
                    ))}
                </view>
            </view>
        </view>
    );
};

export default DishPage;